<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>

		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<title> - 任务清单</title>
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
		<link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

		<link href="css/animate.css" rel="stylesheet">
		<link href="css/style.css?v=4.1.0" rel="stylesheet">
		<link href="http://cdn.xtcrm.com/cdn//v7/pl/sweetalert/sweetalert.min.css" rel="stylesheet" type="text/css">
		<script src="js/plugins/sweetalert/sweetalert.min.js"></script>

	</head>

	<body class="gray-bg">
		<div id="app" class="wrapper wrapper-content  animated fadeInRight">
			<div class="row">
				<div class="col-sm-4">
					<div class="ibox">
						<div class="ibox-content">
							<h3>关怀列表</h3>
							<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
							<ul class="sortable-list connectList agile-list">
								<li class="warning-element" v-for="(list,i) in tableData">
									{{list.car_name}}--{{list.car_content}}
									<div class="agile-detail">
										<a href="javascript:void(0)" class="pull-right btn btn-xs btn-white" @click="addCare(list.car_id,i)">关怀</a>
										<i class="fa fa-clock-o"></i> {{dateFormat(list.car_date)}}
									</div>
								</li>
								
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="ibox">
						<div class="ibox-content">
							<h3>进行中</h3>
							<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
							<ul class="sortable-list connectList agile-list">
								<li class="success-element">
									全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
										<i class="fa fa-clock-o"></i> 2015.09.01
									</div>
								</li>
								<li class="success-element">
									根据自己以前所了解的和从其他途径搜索到的信息，录入客户资料150家。
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
										<i class="fa fa-clock-o"></i> 2015.05.12
									</div>
								</li>
								<li class="warning-element">
									锁定有意向客户20家。
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
										<i class="fa fa-clock-o"></i> 2015.09.10
									</div>
								</li>
								<li class="warning-element">
									力争完成销售指标。
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
										<i class="fa fa-clock-o"></i> 2015.09.09
									</div>
								</li>
								<li class="info-element">
									在总结和摸索中前进。
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
										<i class="fa fa-clock-o"></i> 2015.08.04
									</div>
								</li>
								<li class="success-element">
									不断学习行业知识、产品知识，为客户带来实用介绍内容
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
										<i class="fa fa-clock-o"></i> 2015.05.12
									</div>
								</li>
								<li class="danger-element">
									先友后单：与客户发展良好友谊，转换销售员角色，处处为客户着想
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
										<i class="fa fa-clock-o"></i> 2015.11.04
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-sm-4">
					<div class="ibox">
						<div class="ibox-content">
							<h3>已完成</h3>
							<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
							<ul class="sortable-list connectList agile-list">
								<li class="info-element">
									制定工作日程表
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
										<i class="fa fa-clock-o"></i> 2015.09.10
									</div>
								</li>
								<li class="warning-element">
									每天坚持打40个有效电话，挖掘潜在客户
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
										<i class="fa fa-clock-o"></i> 2015.09.09
									</div>
								</li>
								<li class="warning-element">
									拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好)
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
										<i class="fa fa-clock-o"></i> 2015.09.09
									</div>
								</li>
								<li class="warning-element">
									提高自己电话营销技巧，灵活专业地与客户进行电话交流
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
										<i class="fa fa-clock-o"></i> 2015.08.04
									</div>
								</li>
								<li class="success-element">
									通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人
									<div class="agile-detail">
										<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
										<i class="fa fa-clock-o"></i> 2015.05.12
									</div>
								</li>

							</ul>
						</div>
					</div>
				</div>

			</div>
			
			<el-dialog title="请选择关怀方式" :visible.sync="dialogVisible" width="30%">
				<el-select v-model="value" placeholder="请选择关怀方式：">
					<el-option label="送礼物" :value="441"></el-option>
					<el-option label="发短信" :value="442"></el-option>
					<el-option label="打电话" :value="443"></el-option>
				</el-select>
				<span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCare1()">确 定</el-button>
  </span>
			</el-dialog>

		</div>


		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						tableData: [],
						dialogVisible: false,
						value: '',
						id:'',
						cusid:'',
						theme:'',
					}
				},
				methods: {
					addCare(id,i) {
						this.dialogVisible = true;
						this.id = id;
						if(this.tableData[i].car_type != null){
							this.value = this.tableData[i].car_type;
						}
						this.cusid = this.tableData[i].cus_id;
						this.theme = this.tableData[i].car_name;
					},
					addCare1() {
						this.dialogVisible = false;
						//post提交数据
						axios.post("/careChange",
							//参数转换
							Qs.stringify({
								'type': this.value,
								'id':this.id,
								'cusid':this.cusid,
								'theme':this.theme
							}, {
								arrayFormat: 'brackets'
							})
						).then(function(v) {
							if(v.data == true){
								 swal("关怀成功！", "", "success");
							}else{
								swal("关怀失败！", "", "success");
							}
							window.location.reload();
						}).catch(function(e) {
							//alert("出错了" + e);
						});
					},
					//   时间格式化
			         	dateFormat:function(time) {
							    var date=new Date(time);
							    var year=date.getFullYear();
							    /* 在日期格式中，月份是从0开始的，因此要加0
							     * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
							     * */
							    var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
							    var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
							    var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
							    var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
							    var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
							    // 拼接
							  //  return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
							    return year+"-"+month+"-"+day;
							},
				},
				mounted() {
					this.tableData = ${
						careList
					};
				}
			});
		</script>


		<!-- 全局js -->
		<script src="js/jquery.min.js?v=2.1.4"></script>
		<script src="js/bootstrap.min.js?v=3.3.6"></script>
		<script src="js/jquery-ui-1.10.4.min.js"></script>

		<!-- 自定义js -->
		<script src="js/content.js?v=1.0.0"></script>

		<script>
			$(document).ready(function() {
				$(".sortable-list").sortable({
					connectWith: ".connectList"
				}).disableSelection();

			});
		</script>

	</body>

</html>